<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="area"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const chartData = ref({})
	const opts = ref({
		color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		padding: [20,5,0,5],
		enableScroll: false,
		fontSize:12,
		legend: {},
		xAxis: {
		  disableGrid: true
		},
		yAxis: {
		  gridType: "dash",
		  dashLength: 2
		},
		extra: {
		  area: {
		    type: "curve",
		    opacity: 0.6,
		    addLine: true,
		    width: 1,
		    gradient: true,
		    activeType: "hollow"
		  }
		}
	})
	
	onLoad(() => {
		getServerData()
	})
	
	const getServerData = () => {
		setTimeout(() => {
		  //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		    let res = {
		      categories: ["2020","2021","2022","2023","2024"],
		      series: [
		        {
		          name: "2022",
		          data: [35,8,25,37,4]
		        },
		        {
		          name: "2023",
		          data: [70,40,65,100,44]
		        },
		      ]
		    };
		    chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 500rpx;
  }
</style>